<!--背景色组件-->
<template>
  <div class="list-item-setting">
    <div class="title-info">
      <el-divider content-position="left">组件信息设置</el-divider>
    </div>
    <div class="item-area">
      <el-form-item label="组件高度">
        <el-input-number v-model="optionsInfo.areaInfo.height" :step="1"/>
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number v-model="optionsInfo.areaInfo.fontSize" :step="1"/>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            show-alpha
            size="small"
            :predefine="predefineColors"
            v-model="optionsInfo.areaInfo.color"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            show-alpha
            size="small"
            :predefine="predefineColors"
            v-model="optionsInfo.areaInfo.background"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo.areaInfo['fontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "areaInfo-editor",

  componentName: "areaInfo-editor",

  mixins: [],

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  data() {
    return {
      optionsInfo: Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    }
  },

  watch: {
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val;
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
